<template>
    <div class="login">
        <div class="login-imgbox">
            <img src="../assets/images/login-logo.png" alt="" />
        </div>
        <div class="form-body">
            <el-form ref="form" :model="user">
                <el-form-item>
                    <el-input
                        v-model="user.userid"
                        placeholder="请输入用户名"
                        prefix-icon="el-icon-user"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="user.pwd"
                        show-password
                        placeholder="请输入密码"
                        prefix-icon="el-icon-lock"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        class="form-login"
                        @click="login()"
                        >登录</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { login as Login } from '@/api/user/user.js';
    export default {
        data() {
            return {
                user: {
                    fmdo: 'login',
                    dopost: 'login',
                    userid: '',
                    pwd: '',
                },
            };
        },
        methods: {
            login() {
                // 如果用户传入了loading配置，则启用加载提示，不传则不显示加载提示
                Login(this.user, { loading: { text: '登录中，请稍等...' } }).then(
                    res => {
                        // alert(res.data.msg);
                        if (res.data.status == 1) {
                            // 成功提示
                            this.$message({
                                message: res.data.msg,
                                type: 'success',
                            });
                            // 获取redirect查询参数 如果没有默认设置为首页
                            var redirect = this.$route.query.redirect || 'home';
                            // 当登录成功的时候要获取用户信息
                            this.$store.dispatch('user/GetUserInfo');
                            window.localStorage.setItem('isLog', 'true');
                            this.$router.replace(redirect);
                        } else {
                            // 失败提示
                            this.$message({
                                message: res.data.msg,
                                type: 'warning',
                            });
                        }
                    }
                );
            },
        },
    };
</script>

<style scoped="scoped">
    .login {
        width: 100%;
        height: 100%;
        background: url(../assets/images/login-bg.jpg) no-repeat center/100% 100%;
        overflow: hidden;
    }
    .login .login-imgbox {
        width: 410px;
        height: 190px;
        margin: 100px auto;
    }
    .login .form-body {
        width: 350px;
        margin: 100px auto;
    }
    .form-body .form-login {
        width: 100%;
    }
</style>